import React, { useState } from "react";
import { Card, Input, Button, Typography, Tag } from "antd";
import { useAuth } from "../../hooks/useAuth";

const { Title, Paragraph } = Typography;

const TestPermission: React.FC = () => {
  const { hasPermission, user } = useAuth();
  const [perm, setPerm] = useState("");
  const [result, setResult] = useState<null | boolean>(null);

  const handleCheck = () => {
    setResult(hasPermission(perm));
  };

  return (
    <Card title="测试权限">
      <Title level={5}>
        当前用户：<Tag color="blue">{user?.username || "未登录"}</Tag>
      </Title>
      <Paragraph>
        请输入权限码（如 <Tag>view:user</Tag>、<Tag>edit:role</Tag>{" "}
        等），点击检测按钮查看当前用户是否拥有该权限。
      </Paragraph>
      <Input
        placeholder="请输入权限码"
        value={perm}
        onChange={(e) => setPerm(e.target.value)}
        style={{ width: 240, marginRight: 12 }}
        onPressEnter={handleCheck}
      />
      <Button type="primary" onClick={handleCheck}>
        检测
      </Button>
      {result !== null && (
        <div style={{ marginTop: 16 }}>
          {result ? (
            <Tag color="green">拥有该权限</Tag>
          ) : (
            <Tag color="red">没有该权限</Tag>
          )}
        </div>
      )}
    </Card>
  );
};

export default TestPermission;
